<template>
   <div style="position:relative;top: 10vh">
       <!--            功能栏-->
       <el-row  type="flex" align="middle">
           <el-col :span="3" :offset="1">
               地区：
               <el-dropdown placement="bottom" @command="selectCity">
                   <el-button split-button class="sel_btn">
                       {{this.ByCity}}<i class="el-icon-arrow-down el-icon--right"></i>
                   </el-button>
                   <el-dropdown-menu class="list" slot="dropdown">
                       <el-dropdown-item v-for="(item,index) in cityList"
                                         v-text="item.city"
                                         :command="item.city"
                                         :key="index"></el-dropdown-item>
                   </el-dropdown-menu>
               </el-dropdown>
           </el-col>
           <el-col :span="5" :offset="1">
               日期：
               <el-date-picker
                       style="box-shadow: 0 1px 2px #0a3d62"
                       value-format="yyyyMM"
                       v-model="ByDate"
                       type="month"
                       placeholder="选择查询日期">
               </el-date-picker>
               <el-button @click="getDgeList" class="sel_btn">
                   <el-icon class="el-icon-search"></el-icon>
               </el-button>
           </el-col>
           <el-col :span="8" :offset="2">
               <el-input placeholder="请输入搜索内容" v-model="queryInfo.searchInfo" clearable @clear="getDgeList">
                   <el-button slot="append" icon="el-icon-search"></el-button>
               </el-input>
           </el-col>
           <el-col :offset="1" :span="3">
               <el-button class="addcount" @click="handleExport">
                   <svg class="icon_add" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                       <path d="M10.0088731,5.83850932 L18.2608696,14.1259982 L14.72937,14.1259982 L14.72937,20 L5.27062998,20 L5.25288375,14.1259982 L1.77462287,14.1259982 L10.0088731,5.83850932 Z M19.4321207,0 L19.4321207,2.36024844 L0.567879336,2.36024844 L0.567879336,0 L19.4321207,0 Z" id="形状" fill="#FFFFFF"></path>
                   </svg>
                   导出病害
               </el-button>
           </el-col>
       </el-row>
           <div>
               <el-scrollbar :native="false">
               <!--           展示所有隐患-->
               <el-table
                       v-loading="loading"
                       element-loading-text="拼命加载中"
                       element-loading-spinner="el-icon-loading"
                       id="exportExcel"
                       ref="multipleTable"
                       :data="pagetestlist"
                       tooltip-effect="dark"
                       stripe
                       style="width: 100%"
                       :header-cell-style="{color: '#000000E6'}"
                       @selection-change="handleSelectionChange"
                       :row-key="getRowKeys"
                       :expand-row-keys="expands"
                       @expand-change="expandChange">
                   <!--                多选-->
<!--                   <el-table-column-->
<!--                           fixed="left"-->
<!--                           type="selection"-->
<!--                           width="30">-->
<!--                   </el-table-column>-->
                   <!--                展开行-->
                   <el-table-column type="expand">
                       <template slot-scope="scope">
                           <el-form  v-loading="expand_loading"
                                     element-loading-text="拼命加载中"
                                     element-loading-spinner="el-icon-loading"
                                     label-position="left"  style="margin-left: 40px">
                               <el-form-item >
                                     <span slot="label">
                                         <i class="el-icon-bank-card"></i>
                                         病害名称
                                    </span>
                                   <span style="color: #009199">{{scope.row.name}}</span>
                               </el-form-item>
                               <el-form-item>
                                    <span slot="label">
                                     <i class="el-icon-house"></i>
                                     所属行政区
                                    </span>
                                    <span style="color: #0077aa">{{scope.row.city}}</span>
                               </el-form-item>
                               <el-form-item>
                                <span slot="label">
                                     <i class="el-icon-location"></i>
                                     具体地址
                                </span>
                                   <span style="color: #00a199">{{address ? address : '好像无法解析呐'}}</span>
                               </el-form-item>
                               <el-form-item>
                                   <span slot="label">
                                         <i class="el-icon-picture"></i>
                                         病害照片
                                    </span>
                                   <div v-if="src">
                                       <el-col :span="4" >
                                           <viewer :images="imgUrl" class="XC_pic">
                                               <img :src="src" style="width:100%;" alt="病害">
                                           </viewer>
                                       </el-col>
                                   </div>
                                   <div v-else>
                                       暂无
                                   </div>

                               </el-form-item>
                           </el-form>
                       </template>
                   </el-table-column>
                   <el-table-column prop="name" label="病害名称" align="center"></el-table-column>
                   <el-table-column prop="city" label="所属行政区" align="center">
                       <template slot-scope="scope">
                           <i class="el-icon-position"></i>
                           {{scope.row.city}}
                       </template>
                   </el-table-column>
                   <el-table-column label="经纬度" align="center">
                       <template slot-scope="scope">
                           经度: <span style="color: #005ba1">{{scope.row.longitude}}</span>,
                           纬度: <span style="color: #00a199">{{scope.row.latitude}}</span>
                       </template>
                   </el-table-column>
                   <el-table-column prop="number" sortable label="数量" align="center">
                       <template slot-scope="scope">
                           <span v-if="scope.row.number <=5" style="color: #FF9900">{{scope.row.number}}</span>
                           <span v-else-if="scope.row.number <=10" style="color: #8F2139">{{scope.row.number}}</span>
                           <span v-else style="color: #8F2100">{{scope.row.number}} </span>
                       </template>
                   </el-table-column>
                   <el-table-column prop="square" sortable label="面积" align="center">
                       <template slot-scope="scope">
                           <i class="el-icon-chat-square"></i>
                           <span>{{scope.row.square}}</span>
                       </template>
                   </el-table-column>
                   <el-table-column prop="status" label="修复情况" align="center">
                       <template slot-scope="scope">
                          <span v-if="scope.row.status == 1" style="color: #005ba1">已修复</span>
                           <span v-else style="color: #8F2139">未修复</span>
                       </template>
                   </el-table-column>
                   <el-table-column prop="updateTime" sortable label="更新时间" align="center">
                       <template slot-scope="scope">
                           <i class="el-icon-date"></i>
                           {{scope.row.updateTime.substring(0,16)}}
                       </template>
                   </el-table-column>
                   <el-table-column label="操作" align="center"  fixed="right">
                       <template slot-scope="scope">
                           <el-button type="text" @click="EditDgeInfo(scope.row)"  style="color: #0a3d62">编辑</el-button>
                           <el-button type="text" @click="removeDge(scope.row.id,scope.row.city,scope.row.updateTime)" style="color: red; padding-left: 4px">删除</el-button>
                       </template>
                   </el-table-column>
               </el-table>
               </el-scrollbar>
               <!--      分页区域-->
               <div class="fenye">
                   <el-pagination
                           background
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="queryInfo.pagenum"
                           :page-size="queryInfo.pagesize"
                           layout="total, prev, pager, next, jumper"
                           :total="total">
                   </el-pagination>
               </div>

       </div>
       <el-dialog
               title="修改病害信息"
               :visible.sync="ToOpenUp"
               width="47.9%" @close="DgeDialogClosed">
           <!--      内容主体区域-->
           <el-form :model="dgeForm" ref="dgeFormRef"  status-icon label-width="100px">
               <el-form-item label="病害名称: " required prop="name">
                   <el-input disabled v-model="dgeForm.name" placeholder="请输入病害名称"></el-input>
               </el-form-item>
               <el-form-item label="病害数量: " required prop="number">
                   <el-input type="number" v-model="dgeForm.number" placeholder="请输入病害数量"></el-input>
               </el-form-item>
               <el-form-item label="面积: " prop="square" required>
                   <el-input v-model="dgeForm.square" placeholder="请输入面积"></el-input>
               </el-form-item>
               <el-form-item label="更新时间: " prop="square" required>
                   <el-date-picker
                           style="box-shadow: 0 1px 2px #0a3d62"
                           value-format="yyyyMM"
                           v-model="dgeForm.date"
                           type="month"
                           placeholder="选择日期">
                   </el-date-picker>
               </el-form-item>
               <el-form-item label="病害地址: ">
                   <el-autocomplete
                           v-model="address"
                           :fetch-suggestions="querySearch"
                           placeholder="(选填)病害地址(可直接输入选址，也可定点选址)"
                           :trigger-on-focus="false"
                           @select="handleSelect1"
                           style="width: 80%"
                   />
                   <el-button type="text" style="color: #005ba1" @click="showMap=true">定点选址</el-button>
               </el-form-item>
               <el-form-item label="修复情况: " required prop="status">
                   <el-radio-group v-model="dgeForm.status">
                       <el-radio :label="0" border>未修复</el-radio>
                       <el-radio  :label="1" border>已修复</el-radio>
                   </el-radio-group>
               </el-form-item>
           </el-form>
           <!--      底部区域-->
           <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-col :span="4" :offset="5">
                        <el-button class="addcount" @click="EditDgeForm()">保 存</el-button>
                    </el-col>
                    <el-col :span="4" :offset="5">
                        <el-button class="white_btn" style="margin-left: 40px" @click="resetAdd()">重 置</el-button>
                    </el-col>
                </el-row>
            </span>
           <el-dialog
                   title="地图"
                   :visible.sync="showMap"
                   width="47.9%"
                   :append-to-body="true"
                   @closed="closeMap"
                   style="height: 600px; overflow: hidden;"
                   :close-on-click-modal="false" :close-on-press-escape="false"
           >
               <el-input class="addressInput" v-model="addressKeyword" placeholder="模糊搜索地址，定点选址，在地图上点击关键点，确定即可"></el-input>
               <el-row>
                   <el-col :span="4" :offset="6">
                       <el-button class="addcount" @click="checkedAddress">确 定</el-button>
                   </el-col>
                   <el-col :span="4" :offset="4">
                       <el-button class="white_btn" @click="closeMap">关 闭</el-button>
                   </el-col>
               </el-row>
               <baidu-map :center="center" ak="TRtS1u3t3j3hgXzUy6F4bULjdxmPTz3I" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'
                          v-loading='loadingMap'
                          element-loading-text="拼命加载中"
                          element-loading-spinner="el-icon-loading">
                   <bm-view style="width: 100%; height:420px; flex: 1"></bm-view>
                   <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
               </baidu-map>
           </el-dialog>
       </el-dialog>
       <div>
           <baidu-map style="width: 0px;height: 0px" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" ak="TRtS1u3t3j3hgXzUy6F4bULjdxmPTz3I" @ready="handlerBMap" />
       </div>
       <baidu-map ak="TRtS1u3t3j3hgXzUy6F4bULjdxmPTz3I"></baidu-map>
   </div>
</template>

<script>
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import {BaiduMap, BmLocalSearch, BmView} from "vue-baidu-map/components";
    export default {
        name: 'Data',
        components: {
            BaiduMap,BmView, BmLocalSearch
        },
        data() {
            return {
                //设置row-key只展示一行
                expands: [],
                getRowKeys(row) {//只展开一行放入当前行id
                    return row.id
                },
                queryInfo: {
                    // 模糊搜索
                    searchInfo: '',
                    // 当前页数
                    pagenum: 1,
                    pagesize: 16
                },
                total: 0,
                selected: '',
                AllDgelist:  [],
                loading:true,
                src: '',
                imgUrl: [],
                address:'',
                expand_loading: true,
                ToOpenUp: false, // 更新隐患窗口
                showMap: false,
                // 地图相关
                loadingMap: true,
                Map: '',
                map: '',
                geoc: '',
                addressKeyword: '',
                pointLngLat: '',
                center: { lng:121.41003, lat:29.65537 },
                zoom: 13,
                mapZoom: 15,
                mapCenter: { lng: 0, lat: 0 },
                mapLocation: {
                    address: undefined,
                    coordinate: undefined
                },
                // 编辑病害信息
                dgeForm:{
                    city: '',
                    date: '',
                    id: '',
                    longitude: '',
                    latitude: '',
                    number: '',
                    square: '',
                    status: ''
                },
                ByCity: '鄞州区',
                ByDate: '',
                cityList: []
            }
        },
        created() {
            this.getNow()
            this.getDgeList()
            this.getAllCity()
        },
        methods: {
            getNow(){
               let date = new Date()
                let month = date.getMonth()+1 >9 ? date.getMonth()+1 : '0'+(date.getMonth()+1)
                this.ByDate = date.getFullYear()+ month
                // console.log(this.ByDate)
            },
            async getDgeList(){
                this.loading =true
                // console.log(this.ByCity,this.ByDate)
                const { data: res } = await this.$http.get('/newDiseases/getDiseasesByDateCity', {params:{city: this.ByCity,date: this.ByDate}})
                // console.log(res.data)
                if (res.errCode !== 200) {
                    this.AllDgelist = []
                    this.total = 0
                    if(res.errMsg === '参数异常'){
                        this.loading = false
                        return this.$message.error('暂无当前时间地区病害的信息哦~')
                    }
                    this.loading = false
                    return this.$message.error(res.errMsg)
                }
                this.AllDgelist = res.data
                this.total = this.AllDgelist.length
                this.loading = false
            },
            // 获取所有行政区名称
            async getAllCity () {
                const {data: res} = await this.$http.get('/newDiseases/getAllCities')
                if (res.errCode !== 200) {
                    return this.$message.error(res.errMsg)
                }
                this.cityList = res.data
            },
            // 导出excel
            async handleExport() {
                const confirmResult = await this.$confirm('该操作将导出当前页面隐患列表数据，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消导出')
                }
                this.queryInfo.pagesize = 5000
                var fix = document.querySelector('.el-table__fixed-right');//删除fixed的dom节点
                // console.log(fix)
                let wb;
                this.$nextTick(() => {
                    if (fix) {
                        wb = XLSX.utils.table_to_book(document.querySelector('#exportExcel').removeChild(fix));
                        document.querySelector('#exportExcel').appendChild(fix);//恢复删除fixed的dom节点
                    } else {
                        wb = XLSX.utils.table_to_book(document.querySelector('#exportExcel'));
                    }
                    let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                    try {
                        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), "病害列表.xlsx")
                    } catch (e) {
                        if (typeof console !== 'undefined') console.log(e, wbout)
                    }
                    this.queryInfo.pagesize = 16
                    return wbout;
                })
            },
            // 选中该行
            handleSelectionChange(val) {
                this.selected = val;
                // console.log(val)
            },
            // 监听 pagesize 改变的事件
            handleSizeChange (newSize) {
                this.queryInfo.pagesize = newSize
                this.getDgeList()
            },
            // 选择当前展现的行政区
            selectCity(city){
                this.ByCity = city
                this.getDgeList()
            },
            // 监听页码值改变的事件
            handleCurrentChange (newPage) {
                // console.log(newPage)
                this.queryInfo.pagenum = newPage
                this.getDgeList()
            },
            // 展开事件----动态获取内嵌表数据
            expandChange(row, expandedRows) {
                var that = this
                if (expandedRows.length) {
                    that.expands = []
                    if (row) {
                        let arr = []
                        let baseUrl = 'http://47.93.241.187'
                        this.src = baseUrl + '/image'+ row.filename.substring(14)
                        arr.push(this.src)
                        this.imgUrl = arr
                        this.getAddressName(row.longitude, row.latitude)
                        that.expands.push(row.id)
                        this.expand_loading = false
                    }
                }
            },
            // 根据坐标逆解析地址
            getAddressName(lng,lat){
                let that = this
                // 创建解析器
                var myGeo = new window.BMap.Geocoder();
                var pt = new window.BMap.Point(lng,lat);// 随便写个经纬度
                myGeo.getLocation(pt,function(result){
                    // console.log(result);
                    that.address = result.address ? result.address : '好像无法解析呐'
                });
            },
            // 编辑病害
            async EditDgeForm(){
                let form ={
                    city: this.dgeForm.city,
                    date:this.dgeForm.date,
                    id:this.dgeForm.id,
                    longitude:this.dgeForm.longitude,
                    latitude:this.dgeForm.latitude,
                    number:this.dgeForm.number,
                    square:this.dgeForm.square,
                    status:this.dgeForm.status
                }
                // console.log(form)
                const { data: res } = await this.$http.post('/newDiseases/UpdateDiseases', form)
                // console.log(res.data)
                if (res.errCode !== 200) {
                    return this.$message.error(res.errMsg)
                }
                this.$message.success( '编辑病害成功!')
                this.ToOpenUp = false
                this.getDgeList()
            },
            //    删除病害
            async removeDge (id,city,date1) {
                // console.log(id)
                const confirmResult = await this.$confirm('此操作将永久删除该病害, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }
                var date = date1.substring(0,4) + "" + date1.substring(5,7)
                // console.log('确认删除')
                const { data: res } = await this.$http.get('/newDiseases/DeleteDiseases?city=' + city + '&date=' + date + '&id='+id)
                if (res.errCode !== 200) {
                    return this.$message.error(res.errMsg)
                }
                this.$message.success('删除病害成功!')
                this.getDgeList()
            },
            DgeDialogClosed () {
                this.$refs.dgeFormRef.resetFields()
                this.address = ''
            },
            EditDgeInfo (list){
                // console.log(list)
                this.ToOpenUp = true
                this.dgeForm = list
                // console.log(list.updateTime)
                this.dgeForm.date = list.updateTime.substring(0,4) +""+ list.updateTime.substring(5,7)
                // console.log(this.dgeForm.date)
                var lng = list.longitude //经度
                var lat = list.latitude
                // console.log(lng,lat)
                this.getAddressName(lng,lat)
            },
            resetAdd () {
                this.$refs.dgeFormRef.resetFields()
                this.address = ''
            },
            // 地图初始化
            handler ({BMap, map}) {
                this.mapOpen()
                this.BMap = BMap
                this.map = map
                this.loadingMap = true
                var geolocation = new BMap.Geolocation()
                this.geoc = new BMap.Geocoder() // 地址解析对象
                var $this = this
                // 调用百度地图api 中的获取当前位置接口
                geolocation.getCurrentPosition(function (r) {
                    let myGeo = new BMap.Geocoder()
                    myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
                        if (result) {
                            $this.loadingMap = false
                            // console.log(result)
                            $this.$set($this, 'pointLngLat', {lng: result.point.lng, lat: result.point.lat})
                            map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
                            $this.addPoint({BMap, map})
                        }
                    })
                })
            },
// 添加点位
            addPoint ({BMap, map}) {
                map.clearOverlays()
                var point = new BMap.Point(this.pointLngLat.lng, this.pointLngLat.lat)
                let zoom = map.getZoom()
                // console.log('zoom:' + zoom)
                setTimeout(() => {
                    map.centerAndZoom(point, zoom)
                }, 0)
                var marker = new BMap.Marker(point) // 创建标注
                map.addOverlay(marker) // 将标注添加到地图中
            },
            // 点击地图
            getClickInfo (e) {
                // console.log(e)
                this.center = {lng: e.point.lng, lat: e.point.lat}
                this.pointLngLat = {lng: e.point.lng, lat: e.point.lat}
                // 获取点位信息
                let $this = this
                this.geoc.getLocation(e.point, function (rs) {
                    var addComp = rs.addressComponents
                    $this.pointAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                    // console.log($this.pointAddress)
                })
            },
            async checkedAddress(){
                const confirmResult = await this.$confirm('该操作将把您最后一次鼠标点击的点当作隐患地址，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消')
                }
                this.address = this.pointAddress
                // 将百度地图经纬度转为腾讯地图进行存储
                var lng = this.pointLngLat.lng
                var lat = this.pointLngLat.lat
                this.dgeForm.longitude = lng
                this.dgeForm.latitude = lat
                // console.log(this.pointLngLat,1)
                this.closeMap()
            },
            // 地图相关
            mapOpen () {
                this.top = this.getScrollTop()
                if (this.top) {
                    this.setScrollTop(0)
                }
            },
            closeMap () {
                this.setScrollTop(this.top)
                this.top = 0
                this.showMap = false
            },
            getScrollTop () {
                let scrollTop = 0
                if (document.documentElement && document.documentElement.scrollTop) {
                    scrollTop = document.documentElement.scrollTop
                } else if (document.body) {
                    scrollTop = document.body.scrollTop
                }
                return scrollTop
            },
            setScrollTop (top) {
                if (!isNaN(top)) {
                    if (document.documentElement && document.documentElement.scrollTop !== undefined) {
                        document.documentElement.scrollTop = top
                    } else if (document.body) {
                        document.body.scrollTop = top
                    }
                }
            },
            handlerBMap({ BMap, map }) {
                this.BMap = BMap
                this.map = map
                if (this.mapLocation.coordinate && this.mapLocation.coordinate.lng) {
                    this.mapCenter.lng = this.mapLocation.coordinate.lng
                    this.mapCenter.lat = this.mapLocation.coordinate.lat
                    // this.mapZoom = 15
                    map.addOverlay(new this.BMap.Marker(this.mapLocation.coordinate))
                } else {
                    this.mapCenter.lng = 113.271429
                    this.mapCenter.lat = 23.135336
                    // this.mapZoom = 10
                }
            },
            querySearch(queryString, cb) {
                var that = this
                var myGeo = new this.BMap.Geocoder()
                myGeo.getPoint(queryString, function(point) {
                    if (point) {
                        that.mapLocation.coordinate = point
                        // that.makerCenter(point)
                    } else {
                        that.mapLocation.coordinate = null
                    }
                }, this.locationCity)
                var options = {
                    onSearchComplete: function(results) {
                        if (local.getStatus() === 0) {
                            // 判断状态是否正确
                            var s = []
                            for (var i = 0; i < results.getCurrentNumPois(); i++) {
                                var x = results.getPoi(i)
                                var item = { value: x.address + x.title, point: x.point }
                                s.push(item)
                                cb(s)
                            }
                        } else {
                            cb()
                        }
                    }
                }
                var local = new this.BMap.LocalSearch(this.map, options)
                local.search(queryString)
            },
            handleSelect1(item) {
                var { point } = item
                this.mapLocation.coordinate = point
                var lng = point.lng
                var lat = point.lat
                this.dgeForm.longitude = lng
                this.dgeForm.latitude = lat
            },
        },
        computed: {
            pagetestlist: function () {
                var search = this.queryInfo.searchInfo
                if (search) {
                    return this.AllDgelist.filter(function (data) {
                        return Object.keys(data).some(function (key) {
                            return String(data[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.AllDgelist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
            }
        }
    }
</script>

<style scoped>
    .addcount{
        background: #0a3d62;
        color: white;
        letter-spacing: 2px;
    }
    .addcount:hover, .addcount:active, .addcount:focus{
        background: #005ba1;
        color: ghostwhite;
        letter-spacing: 2px;
    }
    .icon_add{
        width: 20px;
        height: 20px;
        padding-right: 2px;
        vertical-align:middle;
    }
    /deep/.el-checkbox__inner:hover {
        border-color: #005ba1;
    }
    /deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #005ba1;
        border-color: white;
    }
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #005ba1;
        border-color: #005ba1;
    }
    /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
        border-color: #005ba1;
    }
    /*展开行css*/
    .XC_pic{
        width: 90px ;
        height: 90px;
    }

   /deep/.el-radio__input.is-checked + .el-radio__label {
       color: #005ba1 !important;
   }
    /deep/.el-radio__input.is-checked .el-radio__inner {
        background: #005ba1 !important;
        border-color: #005ba1 !important;
    }
    .fenye{
        float: right;
        margin-top: 30px;
        margin-right: 30px;
    }
    .sel_btn{
        background: #0a3d62;
        color: white;
    }
    .sel_btn:hover, .sel_btn:active, .sel_btn:focus{
        background: #005ba1;
        color: ghostwhite;
    }
    .el-dropdown-menu__item:not(.is-disabled):hover{
        background-color: #d9e0ef !important;
        color: #0a3d62 !important;
    }
    .list{
        overflow: auto;
        box-shadow: 1px 2px 4px #99a9bf;
    }
</style>
